<template>
    <div class="userInfo">
        <h4>实名认证</h4>
        <div v-if="identity">    
            <div class="identity_y">
                <div class="title"><i class="el-icon-circle-check-outline"></i> 您已通过版权云实名认证</div>
                <div class="con">
                    <el-form ref="identity_y" :model="identity_y" size="small" label-width="125px">
                        <el-form-item label="证件名称">
                            {{ identity_y.auth_name }}
                        </el-form-item>
                        <el-form-item label="证件号码">
                            {{ identity_y.id_number }}
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <div v-else>
            <div class="resdata">
                <el-form label-width="125px">
                    <el-form-item label="认证类型">
                        <el-radio-group v-model="auth_type">
                            <el-radio :label="1">个人</el-radio>
                            <el-radio :label="2">企业（企业、政府、事业单位、组织）</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <div class="personal" v-if="auth_type==1">
                    <Personal @refresh="getInfo"></Personal>
                </div>
                <div class="company" v-else>
                    <Company @refresh="getInfo"></Company>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { identityGet } from "@/api";
import { mapState, mapMutations } from "vuex";
import Personal from "@/components/identity/personal";
import Company from "@/components/identity/company";
export default {
    data() {
        return {
            user_id: null,
            auth_type: 1,
            identity: false,
            identity_y: {
                auth_name: '',
                id_number: '',
            }
        };
    },
    components: {
        Personal,
        Company,
    },
    mounted() {
        this.user_id = this.croUser.user_id || null;
        this.getInfo();
    },
    computed: {
        ...mapState(["croUser"])
    },
    methods: {
        ...mapMutations(["OUT_LOGIN"]),
        getInfo(){
            let para={
                user_id: this.user_id
            }
            identityGet(para).then(res=>{
                if(res.data){
                    this.identity = true;
                    this.identity_y = res.data;
                }else if(res.tologin) {
                    this.OUT_LOGIN();
                    this.$router.push('/login');
                }else {
                    this.identity = false;
                }
            })
        }
    }
};
</script>
<style lang="scss">

.identity_y {
    margin: 30px auto;
    width: 300px;
    .title {
        text-align: center;
        color: #67C23A;
        font-size: 20px;
        padding-bottom:20px;
    }
}
.userInfo {
    h4 {
        font-size: 14px;
        font-weight: 700;
        line-height: 40px;
    }
    .resdata {
        width: 600px;
        margin: 30px auto;
    }
    .tips {
        line-height: 21px;
        font-size: 12px;
    }
    .id-card-box {
        .left{
            margin-right: 20px;
        }
        .tips {
            padding-top:30px;
        }
    }
    .avatar-position {
        position: relative;
    }
    .sample {
        position: absolute;
        top: 0;
        right: 0;
        .title {
            width: 12px;
            line-height: 21px;
            position: absolute;
            top: 40px;
            margin-left: -21px;

        }
        .pic {
            border-radius: 6px;
            overflow: hidden;
            border: 1px solid #d9d9d9;
            width: 128px;
            height: 180px;
            img{
                width: 128px;
                height: 180px;
            }
        }
    }
}
</style>
